.gallery
  min-height calc(100vh - 350px)
  @media (max-width 768px)
    max-width 100%
    padding 0 10px
  .wrap
    display grid
    grid-template-columns repeat(auto-fit, 200px)
    grid-gap 10px
    justify-content center
    @media (max-width 768px)
      grid-template-columns repeat(3, minmax(100px, 300px))
    @media (max-width 576px)
      grid-template-columns repeat(2, minmax(100px, 300px))
    .item
      position relative
      padding-top 100%
      transition $transition
      &:hover
        filter grayscale(100%)
      img
        position absolute
        display block
        object-fit cover
        width 100%
        height 100%
        top 0
  .waterfallWrap
    display flex
    justify-content center
    align-items center
    position relative
    width 100%
    .item
      float left
      display flex
      justify-content center
      align-items center
      position absolute
      transition $transition
      &:hover
        filter grayscale(100%)
      img
        display block
        object-fit cover
        max-width 100%
        width 100%
        height 100%
        top 0
        left 0
